import { getComponentById, useComponentsStore } from "@/stores/edit-pages-store";
import { setCustomClassStylesheet, setThemeCssClassStylesheet } from "../utils/styleOperation";
import { useEffect } from "react";
import { isEmpty } from "lodash-es";

export function useSetMaterialStylesheet(id: string){
  const {schema} = useComponentsStore()
  useEffect(() => {
    const component = getComponentById(id, schema)!
    const customClassStyle = component?.customClassStyle
    if(!isEmpty(customClassStyle)){
      setCustomClassStylesheet({style: customClassStyle, id});
    }
    
    const themeCss = component?.themeCss
    if(!isEmpty(themeCss)){
      setThemeCssClassStylesheet({style: themeCss, id});
    }
  }, []);
}